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Sprite Kit 
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Sprite Kit 
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Sprite Kit 
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Adventure 
2 targets tiple platfo 
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¢ Sprites and particles 
¢ Textures and atlases 
¢ Scene transitions 
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Sprites and Particles 


Scene Graph 


— id 


NS 


Nodes 


Displaying Sprite Kit Content 


[skView presentScene:myScene] ; 


The Sprite Kit Game Loop 


Each Frame 


—update: 


SKScene 
evaluates actions 


The Sprite Kit Game Loop 


SKView 
Relate (-lasmualcmcralal= Each Frame 


—update: 


—didSimulatePhysics 


SKScene 
simulates physics 


SKScene 
—didEvaluateActions evaluates actions 
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The base class 
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@property SKNodex parent; 
@property NSArrayx children; 
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@property CGPoint position; // relative to parent 
@property CGFloat zRotation; // vadians 
@property CGFloat xScale, yScale; // scaling 


¢ Can control visibility 


(yey ate) eX) a Yun CLC] pu Mey- heme BG 0) aT- i 
@property BOOL hidden; 


SKNode 
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¢Can be a physics body 


SKSpriteNode 
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¢ Draws a 2D image 
= Can be a color 
- Can be a texture image 
= Has an explicit size 


a 


SKSpriteNode 


SKSpriteNode 


Simple creation 


SKSpriteNode xship = [SKSpriteNode spriteNodeWithImageNamed:@”’ship.png” |; 


ship.position = CGPointMake(40.0,30.0); 
[scene addChild: ship] ; 


- Creates a sprite matching the image size 

¢ Centers sprite on image center (0.5, 0.5) 

¢ Positions sprite at (40, 30) relative to its parent 
¢ Follows UIImage -imageNamed: behavior 


SKEmitterNode 


Particles! 


¢ Full featured 2D particle system 
¢ Standard startValue and speed 
¢ Advanced keyframe sequence controls 


SKEmitterNode 


Particle attributes 


¢ Texture 

¢ Scale 

¢ Rotation 

¢ Emission angle 
¢ Emission speed 
> )(=ralemanrererans 

¢ Birth rate 

¢ Particle count 

¢ Lifetime 

¢ Position 


-Z position 

¢ Speed 

¢ Size 

AN ate l= 

¢ Acceleration 

¢ Rotation speed 
¢ Scale speed 

¢ Color 
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SKEmitterNode 
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* Easy-to-use particle editor ee 
- Integrated directly into Xcode 5 

¢ Edit SKEmitterNode attributes visually 
ssl) 0Y-] F<] k= mel =n (e/a micelanm e)celelr-laalaaliace 

¢ Creates an archived SKEmitterNode 


= Use NSKeyedUnarchiver to unarchive 


Sprite Kit Nodes 


Node classes 


Class 

SKNode 
SKScene 
SKSpriteNode 
SKEmitterNode 
SKLabelNode 

Sy Vile (cre) Neyer= 
SKShapeNode 
SKEffectNode 
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Description 

Parent class of all nodes 

Rxole] me) ma alomelal=melr-] ele 

Renders a textured sprite 

Generates and renders particles 

Renders a text string 

Plays video content 

Renders a shape based on a Core Graphics path 
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Textures and Atlases 


SKTexture «—_ “gett tte eter ee tttttttttt tet teseees | 
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¢ Fundamental Sprite Kit bitmap object 
¢ Very flexible 


[SKTexture texturewithImageNamed:@"ship.png"]; 
[SKTexture texturewithCGImage:myCGImageRef] ; 
[SKTexture textureWithData: rgbaNSData size:CGSizeMake(100, 100)]; 
[SKTexture texturewithImage:myUIImage] ; 

[SKTexture textureWithRect:CGRectMake(100, 100, 80, 80) inTexture:tex1]; 


~ 
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¢ Reference from a texture atlas 


Texture Atlases 
Key to performance 
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- Saves memory 
- Improves drawing efficiency 


big_tree_base.ong 
o}(oMmuc=\- mm palrelel (on e)ale 
big_tree_top.png 
o}(oleysyar-Lele)Viva o)are 
cave_base.ong 
cave_destroyed.png 
cave_top.png 
anlialrolapyelielamelare 
small_tree_base.png 
Tans] | MG K=\= em aalrelel(on e)ale 
small_tree_top.png 
warrior_throw_hammer.png 
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Texture Atlases 
In Sprite Kit 


- Xcode generates atlases automatically 
au mce)aamiace {hale lUtclmiaatele(=mil(oxs 
am nXoi i al<ir=1avem ale) ama ksi0lat-Mim e)ce)ale(sre 
¢ Packed for maximum efficiency 
= Automatic rotation 
- Transparent edges trimmed 
mm @) of-e Ul omianl-le[scm=>.auaulelsre 
= Up to 2048 x 2048 


Creating a Texture Atlas 


¢ Put your files in a“.atlas” folder 
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Texture Atlases 
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big_tree_base.ong 

o}(o auc ciommanl(e(el(=melare 
big_tree_top.ong 
o)(olosyar-rele\ wa elale 
cave_base.png 
cave_destroyed.png 
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small_tree_base.ong 
small_tree_middle.ong 
small_tree_top.ong 
warrior_throw_hammer.png 


Archer 

Boss 

Goblin 

Warrior 
Environment.atlas 


«| big_tree_base.png 


«| big_tree_middle.png 
«| big_tree_top.png 

«| blobShadow.png 

«| Cave_base.png 

«| Cave_destroyed.png 

«| Cave_top.png 

«| minionSplort.png 

«| small_tree_base.png 
«| small_tree_middle.png 
«| small_tree_top.png 

«| Warrior_throw_hammer.png 


Tiles.atlas 
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¢ Load a SKTexture from a stand-alone file 


SKTexture xtexture = [SKTexture textureWwithImageNamed:@”’big_tree_base.png”]; 


¢Load a SKTexture from a texture atlas 


SKTexture «texture = [SKTexture textureWwithImageNamed:@”big_tree_base.png”]; 


¢ It’s the same 


= Sprite Kit manages atlases for you 
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SKScene 


A scene of content 


¢ Root node of the scene graph 
¢ Displayed by a SKView 
lal ak=/aiecmice)an Ws) Guid (sreld \(elel= 


¢ Runs per-frame loop 


—update: 
—didEvaluateActions 
—didSimulatePhysics 


SKScene 
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¢ Typical to create different scenes for 


am \Vreliamantcrale ¢ Level 1 
om GT) aatome) o)arelars ¢ Level 2 
= Gameplay ¢ Level 3 
= Game over . 


¢ Level N 
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¢ Performs a transition between current and new SKScene 
es) f-larer-lcemarclaniielelars 

- Cross fade, fade thru color 

au DYoXo)g-mei(e)-1] ale Fe (010) ee) OL=1a 11 ATe 

: Flip vertical, flip horizontal 

= Move in, push in, reveal 

om Gilatlikcvaneeclakiielelars 
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// New scene slides on top of the old scene. 
SKTransition xmovelIn = 
[SKTransition moveInWithDirection:SKTransitionDirectionUp duration:2.@] ; 


// Allow old scene’s animations to continue during transition 
moveln.pausesOutgoingScene = NO; 


// Present the new scene with the transition 
[myView presentScene:newScene transition:movelIn] ; 
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Standard behavior 
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- A parent draws its content before rendering its children 
- Children are rendered in the order they appear in the child array 
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¢ Gives the node an explicit height 
- Relative to its parent node 
¢ Nodes drawn in global Z order 


De Wilateme)cel=le 
SKScene ignoresSiblingOrder property 


¢ Allows nodes in scene to be drawn in any order 
- Sprite Kit batches scene by state 
= Results in fewer draw calls 
ma iVdivam(elate)c=s)ie)|iare|@)cel-1mr-laem4mesyiniola 
am ur- (el au alel@(=4°0 | (0) of-] 4m Ole Tiule amma] (@Ul(-1ka10 
= Drawn from lowest Z to highest Z 
: Sprite Kit sorts nodes at equal Z for optimal batching 


De \WilatemO)cel=le 
Key insight 


* Compose scene as layers 

= Give objects common Z value per layer 

- Place overlapping objects in different layers 
¢ Set ignoreSiblingOrder 
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[node runAction: [SKAction rotateByAngle:M_PI duration:1.0] ]; 
¢ Very simple to use 

= Single action class—SKAction 

= One line creation 

au @1 a) at-]9)(=9m @=10hy-] 0) (29m c=x- [el] 0) (< 
¢ Like a scripting language for Sprite Kit 

- Actions directly affect the node it is run on 
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Basic SKActions 


[SKAction rotateByAngle:M_PI duration:1.@]; 
[SKAction moveTo:aCGPoint duration:1.@]; 
[SKAction fadeAlphaTto:@.75 duration:1.@]; 
[SKAction scaleBy:2.Q0 duration:1.9@]; 


[SKAction scaleXBy:1.5 y:0.5 duration:1.@]; 


oy an) exes are mavedlelar: 
Sequences 


[myNode runAction: [SKAction sequence:@l[actionl1, action2, action3]] ]; 


1.0 sec 2.0 Sec 0.5 sec 


Eee 3.5 Sec 


SKAction Sequence 
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Groups 


[myNode runAction: 


[SKAction group:@lactionl, action2, action3]] ]; 


Ee 


SKAction Group 


oy an) oxolelaremavadlelar: 
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SKAction xgroup = [SKAction group:@I[scale, rotate]]; 


[myNode runAction: [SKAction sequence:@l[move, group, fadeout]] |; 
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Sequence with a Group 


Specialty SKActions 
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[SKAction animateWithTextures:@[tex@, texl1, tex2] timePerFrame:@.1]; 


Specialty SKActions 
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[SKAction followPath:myPath duration:2.5] 


[SKAction followPath:myPath asOffset:YES orientToPath:NO duration:5.@]; 


Specialty SKActions 


Remove from parent 


/* zero duration x*/ 


[SKAction removeFromParent]: 


/*x fade out a sprite and then remove it x*/ 


SKAction xfade = [SKAction fadeOutWithDuration:1.0]: 
>) .¢ Vou um Ko) ame 4 ats) /(0)V, sue ns) Von at) a a=) [0 VAs) al te) 11] oro ao] a 


[sprite runAction: [SKAction sequence:@|fade, remove] ]; 


Specialty SKActions 
alelame) (eye 


/* zero duration, fires once x/ 


[SKAction runBlock:*{ doSomething(); }] 


/* show game over menu after character death animation x/ 

SKAction xfade = [SKAction fadeOutWithDuration:1.0]: 
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SKAction *showMenu = [SKAction runBlock:*{ [self showGameOverMenu]; }]; 


[heroSprite runAction: [SKAction sequence:@[fade, showMenu, remove]] ]; 


SKActions 
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moveByx: y: duration: 
movelo: duration: 
antec} fo),exe [Uir-1ule)ab 
ante\ici fe) exe lvir-lule)ab 
Kole-1Xc15)\/nlale | (ome lel e-le(e)ak 
Kole] Koa koyAvalel (=e l0le-1ule)ab 
scaleX To: duration: 
scaleY To: duration: 
speedBy: duration: 
speedo: duration: 
scaleBy: duration: 
scaleXBy: y: duration: 
Xer-] (<3 Kone [U1 ¢- 1010) 0} 

scaleX To: y: duration: 


sequence: 

group: 

setlexture: 
aulals}(ele.¢ 
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performSelector: onTarget: 


resizeByWidth: height: duration: 
resizeToWidth: height: duration: 


resizeloWidth: duration: 
resizeToHeight: duration: 
repeatAction: count: 
repeatActionForever: 
fadelnWithDuration: 


fadeOutWithDuration: 

fadeAlphaBy: duration: 

icle(=vaNl o)ar-NkoMel0le-lule)ap 
animateWithTextures: timePerFrame: 
animateWithTextures: timePerFrame: resize: 
o}Fehvastolel arel mi(ciNt-laar=remaU\r-1idme)a@elanle)(d(e)ar 
fo) fo) A 74=\\" A101 Ge) (0) emer) (0) a5) (=1aelm-Leice) m 

(eo) oay4=\'h\sidal@e)le)asiisialelm-leike)euel0le-lale)ar 
ie) Ko Wim ldaPmelele-lacelar 

followPath: asOffset: orientToPath: 
waitForDuration: 

waitForDuration: withRange: 
aUlavaveluce)apme)a@aviceniaiaaiNt-laarey 
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¢ Sprites and particles 

¢ Textures and atlases 

¢ Scene transitions 
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